Ext.define('MyApp.view.Viewport', {
    extend: 'Ext.Panel',
    xtype  : 'myapp-viewport',
    config: {
        fullscreen: true,
        layout: 'vbox',
        items: [
            {
                title: 'Header',
                cls: 'header',
                html: [
                    '<img src="'+ST_IMAGES+'/logo.jpg" />'
                ].join("")
            }, 
            {
                xtype   : 'panel',
                layout  : 'card',
                items   : [
                    {
                        selector: 'myapp-mainpanel',
                        xtype  : 'tabpanel',
                        tabBarPosition : 'bottom',
                        items: [
                            {
                                xtype: 'myapp-songpanel'
                            },
                            {
                                xtype: 'myapp-homepanel'
                            },
                            {
                                xtype: 'myapp-contactpanel'
                            }
                        ]
                    }
                ],
                flex: 1
            }
        ]
    }
});